<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>larryms框架之md5/base64扩展组件</title>
    <meta name="keywords" content="swiper" />
    <meta name="description" content="swiper" />
    <meta name="Author" content="larry" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="Shortcut Icon" href="/favicon.ico" />
    <!-- load css -->
    <link rel="stylesheet" type="text/css" href="${base}/larryms/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="${base}/larryms/css/admin/base.css" media="all">
    <link rel="stylesheet" type="text/css" href="${base}/larryms/css/animate.css" media="all">
    <link rel="stylesheet" type="text/css" href="${base}/larryms/css/admin/library.css" media="all">
</head>

<body class="larryms-layout-bgB box-blank  library-box">
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<div class="layui-fluid margin15">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-header header-title library-tit">
                    <h1>LarryMS框架扩展之<cite>md5/base64组件</cite><em>【提供于标准版及以上】</em></h1>
                </div>
                <div class="layui-card-body library-body">
                    <p class="library-tips">
                        <cite>md5/base64组件：</cite>这是LarryMS框架中提供封装的md5和base64两个组件（来自github），MD5的全称是Message-Digest Algorithm 5（信息-摘要算法）；这两个组件使用场景较多，开发中也非常实用，兼容Node.js等服务器端环境，RequireJS，Browserify或webpack等模块加载器以及所有Web浏览器。在前端使用md5加密好处很多这里不再赘述、base64也会经常用到，下面就对md5/base64组件的使用做下示例介绍：
                    </p>
                </div>
            </section>
        </div>
        <div class="layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-body" style="padding: 15px;">
                    <blockquote class="layui-elem-quote larryms-doc-quote" style="font-size: 14px;color: #09B4EF;line-height: 25px;">
                        larryms官方社区提供所有所提供扩展组件的维护和更新。当前版本：md5 v1.2.1/base64 v0.0.3
                    </blockquote>
                </div>
            </section>
        </div>
    </div>
    <div class="layui-row  layui-col-space15 larryms-md5">
        <div class="layui-col-lg6 layui-col-md6 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-header">
                    MD5加密示例【效果示例】
                </div>
                <div class="layui-card-body">
                    <div class="md5">
                        <textarea name="md5input" id="input1" class="input larryms-textarea" placeholder="请输入待加密字符串"></textarea>
                        <div class="layui-btn layui-btn-sm" id="md5Btn">执行MD5加密</div>
                        <textarea name="md5output" id="output1" class="output" placeholder="这里会输出加密后的密文结果"></textarea>
                    </div>

                </div>
            </section>
        </div>
        <div class="layui-col-lg6 layui-col-md6 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-header">
                    MD5加密【Code示例】
                </div>
                <div class="layui-card-body library-code">
                        <pre class="layui-code">
layui.use(['md5'],function(){
    var md5 = layui.md5;
    $('#md5Btn').on('click',function(){
        var input = $('#input1').val();
        $('#output1').text($.md5(input));
    });
});
//js前端nd5加密与后台语言所执行的是一样的算法，一般简单场景加密是用md5在前端也可以处理
//以上代码段所示为larryms框架中md5组件的使用方式
</pre>
                </div>
            </section>
        </div>
    </div>
    <div class="layui-row  layui-col-space15 larryms-md5">
        <div class="layui-col-lg6 layui-col-md6 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-header">
                    Base64示例【效果示例】
                </div>
                <div class="layui-card-body">
                    <div class="md5">
                        <textarea name="base64input" id="input2" class="input larryms-textarea" placeholder="请输入待编码内容"></textarea>
                        <div class="layui-btn layui-btn-sm" id="base64Btn">执行Base64编码</div>
                        <textarea name="base64output" id="output2" class="output" placeholder="这里会输出编码结果"></textarea>
                    </div>
                </div>
            </section>
        </div>
        <div class="layui-col-lg6 layui-col-md6 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-header">
                    Base64【Code示例】
                </div>
                <div class="layui-card-body library-code">
                        <pre class="layui-code">
            layui.use(['base64'],function(){
                var base64 = layui.base64;
                $('#base64Btn').on('click',function(){
                    var input = $('#input2').val();
                    $('#output2').text($.base64.encode(input));
                });
            });
            //以上代码段所示为larryms框架中base64组件的使用方式
            //base64 有encode和decode，并且base64可以编码文件，如常见的对图片转化为base64编码保存
            </pre>
                </div>
            </section>
        </div>
    </div>
</div>
<!-- 加载js文件-->
<script type="text/javascript" src="${base}/larryms/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        version: "2.0.8",
        base: '${base}/larryms/',
        page: 'thirddemo',
        identified: 'md5'
    }).extend({
        larry: 'js/base'
    }).use('larry');
</script>
</body>

</html>